<template>
	<div>
		<el-menu mode="horizontal" default-active="1">
			<el-menu-item index="1"> 指南 </el-menu-item>
			<el-menu-item index="2"> 组件 </el-menu-item>
			<el-menu-item index="3"> 主题 </el-menu-item>
			<el-menu-item index="4"> 资源 </el-menu-item>
		</el-menu>

		<el-menu mode="horizontal" default-active="1">
			<el-menu-item index="1"> 指南 </el-menu-item>
			<el-menu-item index="2"> 组件 </el-menu-item>
			<el-submenu index="3">
				<template slot="title">主题 </template>
				<el-menu-item index="3-1">炫酷黑</el-menu-item>
				<el-menu-item index="3-2">中国红</el-menu-item>
			</el-submenu>
			<el-menu-item index="4"> 资源 </el-menu-item>
		</el-menu>

		<!-- 垂直导航 -->
		<el-menu
			text-color="#aaa"
			active-text-color="#f00"
			class="menu"
			default-active="1"
		>
			<el-menu-item index="1"> 指南 </el-menu-item>
			<el-menu-item index="2"> 组件 </el-menu-item>
			<el-menu-item index="3"> 主题 </el-menu-item>
			<el-menu-item index="4"> 资源 </el-menu-item>
		</el-menu>
	</div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
// .el-menu-item.is-active {
// 	color: red;
// }
.menu {
	width: 200px ;
}
</style>
